import logo from './logo.svg';
import './App.css';
import react from 'react';

class  App extends react.Component {

  /**
   * 构造函数 初始化
   * @param {*} props 
   */
  constructor(props){
    super(props);
    this.state = {
      username:'',
      userpwd:''
    }
  }

  render(){
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <label for="username">
            用户名:
          </label>
          <input type="text" id="username" placeholder="请输入用户名" onChange={this.saveUsername} />
          <br />
          <label for="userpwd">
            密码：
          </label>
          <input type="password" id="userpwd" placeholder="请输入密码" onChange={this.saveUserpwd} />
          <br />
          <button>登录</button>
        </form>
      </div>
    );
  }

  /**
   * 保存用户名到状态
   * @param {*} event 
   */
  saveUsername = (event)=> {
    this.setState(
      {
        username:event.target.value
      }
    )
  }

  /**
   * 保存密码到状态
   * @param {*} event 
   */
  saveUserpwd = (event) => {
    this.setState(
      {
        userpwd:event.target.value
      }
    )
  }

  handleLogin = (event)=>{
    // 阻止表单的默认行为
    event.preventDefault();

    const {username,userpwd} = this.state;

    window.alert('用户名：' + username + ',密码是：' + userpwd + '。'); 
  }
}

export default App;
